<template>
  <div>
    <el-button type="success" style="margin-bottom:30px" @click="goback">
      返回
    </el-button>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="快递单号">
        <el-input
          v-model="formInline.expressNo"
          placeholder="快递单号"
          @change="getOrder"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="设备名/编号">
        <el-input
          v-model="formInline.deviceInfo"
          placeholder="设备名/编号"
          @change="getOrder"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="设备类型">
        <el-select
          v-model="formInline.deviceType"
          placeholder="设备类型"
          @change="getOrder"
          clearable
        >
          <el-option
            v-for="item in typelist"
            :label="item.name"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备型号">
        <el-select
          v-model="formInline.deviceModel"
          placeholder="设备型号"
          @change="getOrder"
          clearable
        >
          <el-option
            v-for="item in modellist"
            :label="item.name"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getOrder">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="handlerbanding"
          >设备绑定快递</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="handlerqu">设备解绑快递</el-button>
      </el-form-item>
    </el-form>
    <!-- 设备数据 -->
    <el-table
      :data="deviceList"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="deviceId" label="设备id"> </el-table-column>
      <el-table-column prop="addPerson" label="联系人姓名" width="180">
      </el-table-column>
      <el-table-column prop="deviceNumber" label="设备编号" width="180">
      </el-table-column>
      <el-table-column prop="deviceTypeName" label="设备类型">
      </el-table-column>
      <el-table-column prop="deviceModelName" label="设备型号">
      </el-table-column>
      <el-table-column prop="goodsNumber" label="数量"> </el-table-column>
      <el-table-column prop="expressNo" label="快递单号"> </el-table-column>
      <el-table-column prop="add_time" label="添加时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scoped">
          <div>
            <el-button
              type="primary"
              size="small"
              @click="handlerDetail(scoped.row.deviceId, scoped.row.expressNo)"
              v-if="scoped.row.expressNo != ''"
              >查看详情</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="formInline.pageSize"
        :current-page="formInline.pageNumber"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        class="management_page"
      ></el-pagination>
    </div>
    <!-- 设备绑定快递的弹框 -->
    <el-dialog
      title="设备绑定快递"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleFormRef"
        label-width="130px"
        class="demo-ruleForm"
      >
        <el-form-item label="快递单号" prop="expressNo">
          <el-input
            v-model="ruleForm.expressNo"
            placeholder="请输入快递单号"
          ></el-input>
        </el-form-item>
        <el-form-item label="快递公司(小写)" prop="expressCom">
          <el-input
            v-model="ruleForm.expressCom"
            placeholder="请输入快递公司"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="expressRemark">
          <el-input
            v-model="ruleForm.expressRemark"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
        <el-form-item label="物流费用" prop="expressFee">
          <el-input
            v-model="ruleForm.expressFee"
            placeholder="请输入物流费用"
          ></el-input>
        </el-form-item>
        <el-form-item label="签收人手机号" prop="signPhone">
          <el-input
            v-model="ruleForm.signPhone"
            placeholder="请输入签收人手机号"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlersure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getExpressGoods,
  devicTypeList,
  devicModelList,
  deviceBindExpress,
  deviceUnBindExpress
} from "../../utils/api";
export default {
  data() {
    return {
      formInline: {
        pageNumber: 1,
        pageSize: 10,
        orderSn: "",
        expressNo: "",
        deviceType: "",
        deviceModel: "",
        deviceInfo: "",
        pageType: 2
      },
      //设备数据
      deviceList: [],
      // 类型数据
      typelist: [],
      // 型号数据
      modellist: [],
      count: 0,
      //被选中的设备id
      deviceArr: [],
      // 设备绑定快递的弹框
      dialogVisible: false,
      ruleForm: {
        orderSn: "",
        expressNo: "",
        expressCom: "",
        expressRemark: "",
        expressFee: "",
        signPhone: "",
        expressDeviceIdList: ""
      },
      rules: {
        expressNo: [
          { required: true, message: "请输入快递单号", trigger: "change" }
        ],
        expressCom: [
          { required: true, message: "请输入快递公司", trigger: "change" }
        ],
        expressRemark: [
          { required: true, message: "请输入备注", trigger: "change" }
        ],
        expressFee: [
          { required: true, message: "请输入物流费用", trigger: "change" }
        ],
        signPhone: [
          { required: true, message: "请输入快签收人手机号", trigger: "change" }
        ]
      },
      // 接触绑定快递数据
      expresslist: {
        orderSn: "",
        expressDeviceIdList: []
      }
    };
  },
  created() {
    this.formInline.orderSn = window.sessionStorage.getItem("orderSn2");
    this.ruleForm.orderSn = window.sessionStorage.getItem("orderSn2");
    this.expresslist.orderSn = window.sessionStorage.getItem("orderSn2");
    this.getOrder();
    this.getdevice();
    this.getdeviceMOdel();
  },
  methods: {
    //   获取该订单下所有的设备
    getOrder() {
      this.postRequest(getExpressGoods, this.formInline).then(res => {
        if (res.code == 200) {
          this.deviceList = res.data.list;
          this.count = res.data.count;
        }
      });
    },
    // 获取设备类型
    getdevice() {
      const params = {
        companyId: 20
      };
      this.postRequest(devicTypeList, params).then(res => {
        if (res.code == 200) {
          this.typelist = res.data;
        }
      });
    },
    //获取设备型号
    getdeviceMOdel() {
      const params = {
        companyId: 20
      };
      this.postRequest(devicModelList, params).then(res => {
        if (res.code == 200) {
          this.modellist = res.data;
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.getOrder();
    },
    handleCurrentChange(val) {
      this.formInline.pageNumber = val;
      this.getOrder();
    },
    // 返回上一级
    goback() {
      this.$store.dispatch("delVisitedViews", this.$route).then(obj => {
        this.$router.push("/kuadifenfa");
      });
      window.sessionStorage.removeItem("orderSn1");
    },
    // 拿到被选中的设备 转换为json
    handleSelectionChange(val) {
      if (val) {
        this.deviceArr = val.map(item => item.deviceId);
        this.ruleForm.expressDeviceIdList = JSON.stringify(
          Array.from(new Set(this.deviceArr))
        );
        this.expresslist.expressDeviceIdList = JSON.stringify(
          Array.from(new Set(this.deviceArr))
        );
      }
    },
    // 点击选择绑定设备
    handlerbanding() {
      if (this.deviceArr.length == 0) {
        return this.$message.error("请选择绑定的设备");
      }
      this.dialogVisible = !this.dialogVisible;
    },
    // 点击确定设备绑定单号
    handlersure() {
      this.postRequest(deviceBindExpress, this.ruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("该设备绑定单号成功");
          this.dialogVisible = false;
          this.getOrder();
        }
      });
    },
    handleClose() {},
    // 点击取消绑定设备
    handlerqu() {
      if (this.deviceArr.length == 0) {
        return this.$message.error("请选择绑定的设备");
      }
      this.$confirm("您是否要取消绑定设备, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.postRequest(deviceUnBindExpress, this.expresslist).then(res => {
            this.$message({
              type: "success",
              message: "取消绑定设备成功!"
            });
            this.getOrder();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handlerDetail(deviceId, expressNo) {
      window.sessionStorage.setItem("deviceId", deviceId);
      window.sessionStorage.setItem("expressNo", expressNo);
      this.$router.push("/kuaidiDetial");
    }
  }
};
</script>

<style></style>
